<template>
	<div>
		<Navigation></Navigation>
		<div style="margin-top: 40px;margin-bottom: 150px;" align="center">
			<div style="width: 60%;">
				<el-steps :active="4" align-center align="left" style="margin-bottom: 100px;">
					<el-step title="乘机信息"></el-step>
					<el-step title="确认信息"></el-step>
					<el-step title="支付"></el-step>
					<el-step title="完成"></el-step>
				</el-steps>
				<el-result icon="success" title="支付成功" v-if="state==='0'">
					<template slot="extra">
						<el-button type="primary" size="medium" onclick="window.location.href='/'">返回首页</el-button>
						<el-button type="primary" size="medium" @click="order()">查看订单</el-button>
					</template>
				</el-result>

				<el-result v-else-if="state==='1'" icon="error" title="支付失败" subTitle="如果您已经付款,请点击我已付款按钮进行核验">
					<template slot="extra">
						<el-button type="primary" size="medium">我已支付</el-button>
						<el-button type="primary" size="medium" @click="order()">查看订单</el-button>
					</template>
				</el-result>
				
				<el-result v-else-if="state==='3'" icon="error" title="此订单无效">
					<template slot="extra">
						<el-button type="primary" size="medium" onclick="window.location.href='/'">返回首页</el-button>
						<el-button type="primary" size="medium" @click="order()">查看订单</el-button>
					</template>
				</el-result>
				
				<el-result v-else-if="state==='4'" icon="error" title="此订单已被取消">
					<template slot="extra">
						<el-button type="primary" size="medium" onclick="window.location.href='/'">返回首页</el-button>
						<el-button type="primary" size="medium" @click="order()">查看订单</el-button>
					</template>
				</el-result>
			</div>
		</div>
		<BottomNavigation></BottomNavigation>
	</div>
</template>

<script>
	import Navigation from "../components/Navigation"
	import BottomNavigation from "../components/BottomNavigation"

	export default {
		data() {
			return {
				state: this.$route.query.state
			}
		},
		components: {
			Navigation,
			BottomNavigation
		},
		methods: {
			order(){
				sessionStorage.setItem("switch",1);
				location.href="/myinfo"
			}
		}
	}
</script>

<style>
</style>